{% extends './blog_base.html' %}

{% block title %}{{ blog_info['title'] }}{% end %}

{% block body %}
<div class="flex-fill">
    <div class="header header-bg" style="background-image: url(/static/photos/bobby-burch-145906-1500.jpg);">
        <p class="blog-title">{{ blog_info['title'] }}</p>
        <p class="blog-title-small">{{ blog_info['author'] }} · {{ blog_info['views'] }}人次阅读 · {{ blog_info['comments'] }}人次评论 · {{ blog_info['category'] }} · {{ blog_info['time'] }} </p>
        <div class="tags">
            {% for tag in blog_info['tags'] %}
              <span class="tag">{{ tag }}</span>
            {% end %}
        </div>
    </div>
    <div class="my-3 my-md-5">
        <div class="container">
            <div class="card">
                <div class="card-body">
                    <div class="text-wrap p-lg-2">
                      <textarea class="form-control-plaintext" rows="20" style="font-size: 18px;" disabled>{{blog_info['content']}}</textarea>
                    </div>
                </div>
            </div>
          
            <div class="card">
              <div class="dimmer">
                <form class="dimmer-content">
                  <div class="loader"></div>
                  <div class="card-body">
                    <h3 class="card-title">评论</h3>
                    <div class="row">
                      <input type="hidden" name="post_id" value="{{blog_info['id']}}">
                      <div class="col-sm-6 col-md-3">
                        <div class="form-group">
                          <label class="form-label">昵称</label>
                          <input type="text" class="form-control" name="nick_name" placeholder="昵称..">
                        </div>
                      </div>
                      <div class="col-sm-6 col-md-4">
                        <div class="form-group">
                          <label class="form-label">邮箱</label>
                          <input type="email" class="form-control" name="email" placeholder="放心填写邮箱，不会被泄露..">
                        </div>
                      </div>
                      <div class="col-md-12">
                        <div class="form-group mb-0">
                          <label class="form-label">你想说的</label>
                          <textarea rows="5" class="form-control" name="content" placeholder="你想说什么.." ></textarea>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="card-footer text-right">
                    <button type="button" class="btn btn-primary" onclick="addComment()">发表评论</button>
                  </div>
                </form>
              </div>
              <ul class="list-group card-list-group">
                {% if len(comment_list) == 0 %}
                <li class="list-group-item py-5">
                  暂无评论~
                </li>
                {% end %}
                {% for comment in comment_list %}
                <li class="list-group-item py-5">
                  <div class="media">
                    <div class="media-object avatar avatar-md mr-4" style="background-image: url(/static/faces/male/18.jpg)"></div>
                    <div class="media-body">
                      <div class="media-heading">
                        <small class="float-right text-muted">{{ comment["create_time"] }}</small>
                        <h5>{{ comment["name"] }}</h5>
                      </div>
                      <div>
                        {{ comment["content"] }}
                      </div>
                    </div>
                  </div>
                </li>
                {% end %}
              </ul>
            </div>
        </div>
    </div>
</div>

<script>
  require(['jquery'], function($){

  })

  function getComment(){
    $.ajax("/api/add_comment", {
      method: "GET"
    }).done(function(data){
      showAlert(data["status"], data["msg"])
    })
  }

  function addComment(){
    let inputPost = $("input[name=post_id]").val()
    let inputName = $("input[name=nick_name]").val()
    let inputEmail = $("input[name=email]").val()
    let inputContent = $("textarea[name=content]").val()
    if (inputName=="" || inputEmail=="" || inputContent==""){
        showAlert(0, "输入不能为空！")
        return false
    }
    data_form = {
      post_id: inputPost,
      nick_name: inputName,
      email: inputEmail,
      content: inputContent,
    }
    console.log(data_form)
    $(".dimmer").addClass("active")
    $.ajax("/api/add_comment", {
      method: "POST",
      contentType: "application/json",
      dataType: "json",
      headers: {},
      data: JSON.stringify(data_form)
    }).done(function(data){
      showAlert(data["status"], data["msg"])
      if (data["status"] == 1){
        window.location.reload()
      }
    }).fail(function(xhr, error){

    }).always(()=>{
      $(".dimmer").removeClass("active")
    })
  }
</script>

{% end %}